<!--实时贷记业务录入-->
<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="130px">
      <!--交易基础信息-->
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>交易基础信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="业务类型" prop="bizTypeCode">
              <el-select v-model="form.bizTypeCode" placeholder="业务类型" style="width: 100%"
                         @change="bizTypeCodeChange">
                <el-option
                  v-for="dict in dictMap.BIZ_TYPE_123"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务种类" prop="bizCtgyCode">
              <el-select v-model="form.bizCtgyCode" placeholder="业务种类">
                <el-option
                  v-for="dict in busTypeList"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="记账标志" prop="cbflag">
              <el-select v-model="form.cbflag" clearable placeholder="记账标志" style="width: 100%">
                <el-option
                  v-for="dict in dictMap.CBFLAG"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!--付款人信息-->
      <el-card class="form-card payerInfo-card">
        <div slot="header" class="label-header-msg">
          <span>付款人信息</span>
        </div>

        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="付款人账号" prop="payerActno">
              <el-input v-model="form.payerActno" placeholder="付款人账号"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-row>
              <el-button type="primary" icon="el-icon-search" plain @click="openPayerDialog('payerActno')">
                账号查找
              </el-button>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款人名称" prop="payerName">
              <el-input v-model="form.payerName" placeholder="付款人名称"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="付款人地址" prop="payerAddr">
              <el-input v-model="form.payerAddr" placeholder="付款人地址"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="付款行行号" prop="payerBrno">
              <el-input v-model="form.payerBrno" placeholder="" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款行行名" prop="payerBrname">
              <el-input v-model="form.payerBrname" placeholder="" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <div class="grid-payer">
              <el-form-item label="付款人开户行行号" prop="payerAccBrno">
                <el-input
                  v-model="form.payerAccBrno"
                  placeholder="付款人开户机构号"
                  @keyup.enter.native="getBankInf('payerAccBrno', form.payerAccBrno)"
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-payer">
              <el-button type="primary" icon="el-icon-search" plain @click="openBankBranchDialog('payerAccBrno')">
                行号查找
              </el-button>
            </div>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款人开户行行名" prop="payerAccBrName" label-width="130px">
              <el-input v-model="form.payerAccBrName" placeholder="付款人开户行行名"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!--收款人信息-->
      <el-card class="form-card payeeInfo-card">
        <div slot="header" class="label-header-msg">
          <span>收款人信息</span>
        </div>
        <el-row :gutter="10">
          <el-col :span="8">
            <div class="grid-payee">
              <el-form-item label="收款人账号" prop="payeeActno">
                <el-input v-model="form.payeeActno" placeholder="收款人账号"/>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="4">
            <el-row>
              <el-button type="primary" icon="el-icon-search" plain @click="openPayeeDialog('payeeActno')">
                账号查找
              </el-button>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款人名称" prop="payeeName">
              <el-input v-model="form.payeeName" placeholder="收款人名称"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="收款人地址" prop="payeeAddr">
              <el-input v-model="form.payeeAddr" placeholder="收款人地址"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <div class="grid-payee">
              <el-form-item label="收款行行号" prop="payeeBrno">
                <el-input
                  v-model="form.payeeBrno"
                  placeholder="收款行行号"
                  @keyup.enter.native="getBankInf('payeeBrno', form.payeeBrno)"
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-payee">
              <el-button type="primary" icon="el-icon-search" plain @click="openBankBranchDialog('payeeBrName')">
                行号查找
              </el-button>
            </div>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款行行名" prop="payeeBrName" label-width="130px">
              <el-input v-model="form.payeeBrName" placeholder="收款行行名" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <div class="grid-payee">
              <el-form-item label="收款人开户行行号" prop="payeeAccBrno">
                <el-input
                  v-model="form.payeeAccBrno"
                  placeholder="收款人开户行行号"
                  @keyup.enter.native="getBankInf('payeeAccBrno', form.payeeAccBrno)"
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-payee">
              <el-button type="primary" icon="el-icon-search" plain @click="openBankBranchDialog('payeeAccBrno')">
                行号查找
              </el-button>
            </div>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款人开户行行名" prop="payeeAccBrName" label-width="130px">
              <el-input v-model="form.payeeAccBrName" placeholder="收款人开户行行名"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <!--其他信息-->
      <el-card class="form-card payOtherInfo-card">
        <div slot="header" class="label-header-msg">
          <span>其他交易信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="交易货币" prop="curcd">
              <el-input v-model="form.curcd" placeholder="" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="金额" prop="amount">
              <ht-amount-input
                v-model="form.amount"
                placeholder="金额"
              ></ht-amount-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-otherInfo">
              <el-form-item label="附言" prop="contentAll">
                <el-input
                  type="textarea"
                  v-model="form.contentAll"
                  placeholder="附言"
                  maxlength="140"
                  show-word-limit
                />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-otherInfo">
              <el-form-item label="备注" prop="remarks">
                <el-input
                  type="textarea"
                  v-model="form.remarks"
                  placeholder="备注"
                  maxlength="140"
                  show-word-limit
                />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="form-card txnInfo-card" v-if="this.form.bizTypeCode == 'C102'">
        <div slot="header" class="label-header-msg">
          <span>通存业务附加数据域</span>
        </div>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="地域标识" prop="regionid">
              <el-input v-model="form.regionid" @change="getbase('RegionId')"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-input v-model="form.regionidDesc" :disabled="true"/>
          </el-col>

          <el-col :span="6">
            <el-form-item label-width="20px">
              <el-button icon="el-icon-search" plain type="primary" @click="openBasedataDialog('RegionId')">
                请选择
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="磁介质类型：" prop="mediumType">
              <el-select v-model="form.mediumType" placeholder="" style="width: 100%">
                <el-option
                  v-for="dict in dictMap.Medium_Type_Code"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="磁道信息数目：" prop="mediumNum">
              <el-input v-model="form.mediumNum" placeholder=""/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-otherInfo">
              <el-form-item label="磁道信息1：" prop="mediumInfo1">
                <el-input type="textarea" v-model="form.mediumInfo1" placeholder=""/>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-otherInfo">
              <el-form-item label="磁道信息2：" prop="mediumInfo2">
                <el-input type="textarea" v-model="form.mediumInfo2" placeholder=""/>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-otherInfo">
              <el-form-item label="磁道信息3：" prop="mediumInfo3">
                <el-input type="textarea" v-model="form.mediumInfo3" placeholder=""/>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="卡序号：" prop="cardNum">
              <el-input v-model="form.cardNum" placeholder="" maxlength="3"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="IC卡信息：" prop="cardInfo">
              <el-input v-model="form.cardInfo" placeholder=""/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="证件类型：" prop="idType">
              <el-select v-model="form.idType" placeholder="" style="width: 100%">
                <el-option
                  v-for="dict in dictMap.Id_Type_Code"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件号码：" prop="idNum">
              <el-input v-model="form.idNum" placeholder=""/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" :loading="isLoading">提交</el-button>
      <el-button type="warning" @click="refresh" :loading="isLoading">重置</el-button>
    </div>
    <bank-branch-dialog ref="bankBranchDialog" @confirm="confirmBankBranch"></bank-branch-dialog>
    <base-data-dialog ref="basedataDialog" @confirm="confirmData"></base-data-dialog>
    <payee-dialog ref="payeeDialog" @confirm="confirmPayee"></payee-dialog>
    <payer-dialog ref="payerDialog" @confirm="confirmPayer"></payer-dialog>
  </div>
</template>

<script>
import {submit, query} from "@/api/cnaps/bepsDraft/realtime_credit_operations_entry.js";
import {listPageMixin} from "@/libs/listPageMixin";
import BankBranchDialog from "@/views/components/BankBranchDialog";
import {mapGetters} from "vuex";
import HtAmountInput from "@/views/components/HtAmountInput";
import {getBasedata} from "@/api/cnaps/common/basedata";
import BaseDataDialog from "@/views/components/BasedataDialog";
import {getBankInfByBankCode} from "@/api/cnaps/common/bankInfo";
import PayeeDialog from "@/views/components/PayeeDialog/index.vue";
import PayerDialog from "@/views/components/PayerDialog/index.vue";

export default {
  name: "InsideTransferEntry",
  mixins: [listPageMixin],
  components: {PayerDialog, PayeeDialog, HtAmountInput, BankBranchDialog, BaseDataDialog},
  computed: {
    ...mapGetters(["name", "globalBusData"]),
  },
  data() {
    return {
      queryData: {},
      isLoading: false,
      busTypeList: [],
      // 录入参数
      form: {
        bizTypeCode: "A101",
        bizCtgyCode: "",
        cbflag: "",
        payerBrno: "",
        payerBrName: "",
        payerActno: "",
        payerName: "",
        payerAddr: "",
        payerAccBrno: "",
        payerAccBrName: "",
        payeeActno: "",
        payeeName: "",
        payeeAddr: "",
        payeeBrno: "",
        payeeBrName: "",
        payeeAccBrno: "",
        payeeAccBrName: "",
        curcd: "CNY",
        amount: "",
        contentAll: "",
        remarks: "",
        regionid: "",
        mediumType: "",
        mediumNum: "",
        mediumInfo1: "",
        mediumInfo2: "",
        mediumInfo3: "",
        cardNum: "",
        cardInfo: "",
        idType: "",
        idNum: "",

      },
      rules: {
        bizTypeCode : [{required: true, message: "不能为空", trigger: "blur"}],
        bizCtgyCode : [{required: true, message: "不能为空", trigger: "blur"}],
        cbflag : [{required: true, message: "不能为空", trigger: "blur"}],
        payerBrno : [{max: 14, message: "最大长度为14位", trigger: "blur"}],
        payerBrnoname : [{max: 60, message: "最大长度为60位", trigger: "blur"}],
        payerAccBrno : [{required: true, message: "不能为空", trigger: ['blur', 'change']},{max: 35, message: "最大长度为35位", trigger: "blur"} ],
        payerAccBrnoname : [{max: 140, message: "最大长度为140位", trigger: "blur"} ],
        payerActno : [{required: true, message: "不能为空", trigger: ['blur', 'change']},{max: 32, message: "最大长度为32位", trigger: "blur"}],
        payerName : [{required: true, message: "不能为空", trigger: ['blur', 'change']},{max: 60, message: "最大长度为60位", trigger: "blur"} ],
        payerAddr : [{max: 70, message: "最大长度为70位", trigger: "blur"} ],
        payeeActno : [{required: true, message: "不能为空", trigger: ['blur', 'change']},{max: 32, message: "最大长度为32位", trigger: "blur"}],
        payeeName : [{required: true, message: "不能为空", trigger: ['blur', 'change']},{max: 60, message: "最大长度为60位", trigger: "blur"}],
        payeeAddr : [{max: 70, message: "最大长度为70位", trigger: "blur"}],
        payeeBrno : [{required: true, message: "不能为空", trigger: ['blur', 'change']},{max: 14, message: "最大长度为14位", trigger: "blur"}],
        payeeBrnoname : [{max: 60, message: "最大长度为60位", trigger: ['blur', 'change']}],
        payeeAccBrno : [{required: true, message: "不能为空", trigger: "blur"},{max: 35, message: "最大长度为35位", trigger: "blur"}],
        payeeAccBrnoname : [{max: 140, message: "最大长度为140位", trigger: "blur"} ],
        curcd : [{max: 3, message: "最大长度为3位", trigger: "blur"}],
        amount : [{required: true, message: "不能为空", trigger: "blur"}],
        contentAll : [{max: 140, message: "最大长度为140位", trigger: "blur"}],
        remarks : [{max: 140, message: "最大长度为140位", trigger: "blur"}],
        cardNum : [{max: 3, message: "最大长度为3位", trigger: "blur"}],
        mediumNum : [{max: 1, message: "最大长度为1位", trigger: "blur"}],
        regionid : [{required: true, message: "不能为空", trigger: "blur"}]
      },
      searchFormDictList: ["BIZ_TYPE_123", "CBFLAG", "BIZ_CTGY_BEPS_A101", "Id_Type_Code", "Medium_Type_Code"],
    };
  },
  created() {
    query().then((res) => {
      this.$set(this.form, "payerBrno", res.result.payerBrno);
      this.$set(this.form, "payerBrname", res.result.payerBrname);
      this.queryData = res.result;
    });
  },
  mounted() {
    this.bizTypeCodeChange(this.form.bizTypeCode);
  },

  methods: {
    // 收款人账号查找
    openPayeeDialog(fromFlag = "") {
      this.$refs.payeeDialog.show(fromFlag);
    },
    confirmPayee(fromFlag, row) {
      if (fromFlag == "payeeActno") {
        this.$set(this.form, "payeeActno", row.actNo);
        this.$set(this.form, "payeeName", row.name);
        this.$set(this.form, "payeeBrno", row.rcvBrno);
        this.$set(this.form, "payeeBrName", row.rcvBrname);
        this.$set(this.form, "payeeAddr", row.addr);
        this.$set(this.form, "payeeAccBrno", row.accBrno);
        this.$set(this.form, "payeeAccBrName", row.accBrnoName);
      }
    },
    // 付款人账号查找
    openPayerDialog(fromFlag = "") {
      this.$refs.payerDialog.show(fromFlag);
    },
    confirmPayer(fromFlag, row) {
      if (fromFlag == "payerActno") {
        this.$set(this.form, "payerActno", row.actNo);
        this.$set(this.form, "payerName", row.name);
        this.$set(this.form, "payerAddr", row.addr);
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = true;
          submit(this.form)
            .then((res) => {
              this.$alert(`CORE_ID: ${res.result.rspId}`, "生成交易流水号", {
                confirmButtonText: "确定",
                callback: (action) => {
                },
              });
              this.msgSuccess("提交成功");
              this.loading = false;
            })
            .catch((err) => {
              this.loading = false;
            });
        }
      });
    },
    bizTypeCodeChange(code) {
      //联动修改bizCtgyCode
      let dictKeyPre = `BIZ_CTGY_BEPS_${code}`;
      this.getDicts(dictKeyPre).then((response) => {
        this.busTypeList = response.result;
        this.$set(this.form, "bizCtgyCode", this.busTypeList[0].value);
      });
    },

    //回车获取basedata值
    getbase(dataType) {
      const dataValue = this.form.regionid;
      if (dataValue === "" || dataValue === null || dataValue === undefined) {
        return;
      }

      getBasedata(dataType, dataValue)
        .then((response) => {
          if (response.code == "S" && response.result !== null) {
            this.$set(this.form, "regionid", response.result.dataValue);
            this.$set(this.form, "regionidDesc", response.result.dataDesc);
          } else {
            this.msgSuccess("找不到对应的字典项");
            this.$set(this.form, "regionid", null);
            this.$set(this.form, "regionidDesc", null);
          }
        })
        .catch((err) => {
          this.$set(this.form, "regionid", null);
          this.$set(this.form, "regionidDesc", null);
        });
    },
    openBasedataDialog(dataType = "") {
      this.$refs.basedataDialog.show(dataType);
    },
    confirmData(fromFlag, row) {
      this.$set(this.form, "regionid", row.dataValue);
      this.$set(this.form, "regionidDesc", row.dataDesc);
    },

    //点击重置按钮
    refresh() {
      this.resetForm("form");
      this.bizTypeCodeChange(this.form.bizTypeCode);
      this.$set(this.form, "payerBrno", this.queryData.payerBrno);
      this.$set(this.form, "payerBrname", this.queryData.payerBrname);
    },

    //行名行号返回
    confirmBankBranch(fromFlag, row) {
      if (fromFlag == "payeeBrName") {
        this.$set(this.form, "payeeBrno", row.bankCode);
        this.$set(this.form, "payeeBrName", row.orgFullname);
      } else if (fromFlag == "payeeAccBrno") {
        this.$set(this.form, "payeeAccBrno", row.bankCode);
        this.$set(this.form, "payeeAccBrName", row.orgFullname);
      } else if (fromFlag == "payerAccBrno") {
        this.$set(this.form, "payerAccBrno", row.bankCode);
        this.$set(this.form, "payerAccBrName", row.orgFullname);
      }
    },
    //行名行号查询
    openBankBranchDialog(fromFlag = "") {
      this.$refs.bankBranchDialog.show(fromFlag);
    },

    //回车取行号信息
    getBankInf(searchType, bankCode) {
      getBankInfByBankCode(bankCode).then((response) => {
        if (response.code == "S" && (response.result !== null && response.result !== undefined)) {
          switch (searchType) {
            case "payerBrno":
              this.$set(this.form, "payerBrno", response.result.bankCode);
              this.$set(this.form, "payerBrName", response.result.orgFullname);
              break;
            case "payerAccBrno":
              this.$set(this.form, "payerAccBrno", response.result.bankCode);
              this.$set(this.form, "payerAccBrName", response.result.orgFullname);
              break;
            case "payeeBrno":
              this.$set(this.form, "payeeBrno", response.result.bankCode);
              this.$set(this.form, "payeeBrName", response.result.orgFullname);
              break;
            case "payeeAccBrno":
              this.$set(this.form, "payeeAccBrno", response.result.bankCode);
              this.$set(this.form, "payeeAccBrName", response.result.orgFullname);
              break;
          }
        } else {
          this.msgSuccess("查无此行号");
          switch (searchType) {
            case "payerBrno":
              this.$set(this.form, "payerBrName", null);
              break;
            case "payerAccBrno":
              this.$set(this.form, "payerAccBrName", null);
              break;
            case "payeeBrno":
              this.$set(this.form, "payeeBrName", null);
              break;
            case "payeeAccBrno":
              this.$set(this.form, "payeeAccBrName", null);
              break;
          }
        }
      });
    },


  },
};
</script>
<style>
.app-container {
  overflow: scroll;
}

.dialog-footer {
  margin: 10px 0;
  text-align: center;
}
</style>
